<template>
	<view class="zai-box">
		<scroll-view scroll-y class="page">
			<view class="zai-bg">
				<view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
					<image src="@/static/logo.png" mode='aspectFit' class="zai-logo"></image>

					<!-- <view class="zai-title text-shadow ">智慧住房 </view> -->
				</view>
			</view>
			<view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
				<view class="zai-title text-shadow ">智能住房 </view>
			</view>
			<view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
				<block>
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view>
						<input placeholder="请输入账号" name="input" v-model="userName"></input>
					</view>
					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-lock margin-right-xs"></text>密码:</view>
						<input class="uni-input" placeholder="请输入密码" :password="!showPassword" v-model="password" />
						<view class="action text-lg">
							<text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
								@click="changePassword"></text>
						</view>
					</view>
					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-keyboard margin-right-xs"></text>验证码:</view>
						<input placeholder="请输入验证码" name="input" v-model="captcha"></input>
						<image :src="captchaUrl" class="login-capt" @click="getCaptcha()"></image>
					</view>
					<view class="padding text-center margin-top">
						<button class="bg-blue lg shadow" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="onLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
						</button>
					</view>
				</block>


				<!-- #ifdef APP-PLUS -->
				<view class="padding flex flex-direction  text-center">
					当前版本:{{version}}
				</view>
				<!-- #endif -->

			</view>
		</scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<view class="cuIcon-emojifill text-blue"></view>
			<view class="text-blue">登录中...</view>
		</view>
	</view>

</template>

<script>
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants"
	import {
		mapActions
	} from "vuex"
	import configService from '@/common/service/config.service.js';

	export default {
		data() {
			return {
				shape: '', //round 圆形
				loading: false,
				captchaUrl:'',
				captchaKey:'',
				userName: '黄兰',
				password: 'a123456789.',
				captcha:'',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version: '',
				//第三方登录相关信息
				thirdType: "",
				thirdLoginInfo: "",
				thirdLoginState: false,
				bindingPhoneModal: false,
				thirdUserUuid: '',
			};
		},
		onLoad: function() {
			this.getCaptcha();
			// #ifdef APP-PLUS
			var that = this
			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
				that.version = wgtinfo.version
			});
			// #endif
		},
		computed: {
			isSendSMSEnable() {
				return this.smsCountDown <= 0 && this.phoneNo.length > 4;
			},
			getSendBtnText() {
				if (this.smsCountDown > 0) {
					return this.smsCountDown + '秒后发送';
				} else {
					return '发送验证码';
				}
			},
			canSMSLogin() {
				return this.userName.length > 4 && this.smsCode.length > 4;
			},
			canPwdLogin() {
				return this.userName.length > 4 && this.password.length > 4;
			},
		},
		methods: {
			...mapActions(["mLogin", "PhoneLogin", "ThirdLogin"]),
			onLogin: function() {
				if (!this.userName || this.userName.length == 0) {
					this.$tip.toast('请填写用户名');
					return;
				}
				if (!this.password || this.password.length == 0) {
					this.$tip.toast('请填写密码');
					return;
				}
				let loginParams = {
					username: this.userName,
					password: this.password,
					captcha:this.captcha,
					checkKey:this.captchaKey,
				}
				this.loading = true;
				this.mLogin(loginParams).then((res) => {
					this.loading = false;
					if (res.data.success) {
						// #ifdef APP-PLUS
						this.saveClientId()
						// #endif
						// #ifndef APP-PLUS
						this.$tip.success('登录成功!')
						this.$Router.replaceAll({
							name: 'baseMain'
						})
						// #endif
					} else {
						this.$tip.alert(res.data.message);
						this.getCaptcha();
					}
				}).catch((err) => {
					let msg = err.data.message || "请求出现错误，请稍后再试"
					this.loading = false;
					this.$tip.alert(msg);
					this.getCaptcha();
				}).finally(() => {
					this.loading = false;
				})
			},
			getCaptcha() {
				this.captchaKey = new Date().getTime();
				this.$http.get(`/sys/randomImage/${this.captchaKey}`).then(res => {
					console.log(res)
					this.captchaUrl = res.data.result;
				})
			},
			saveClientId() {
				var info = plus.push.getClientInfo();
				var cid = info.clientid;
				this.$http.get("/sys/user/saveClientId", {
					params: {
						clientId: cid
					}
				}).then(res => {
					console.log("res::saveClientId>", res)
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({
						name: 'index'
					})
				})
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			// // 手机号登录 暂时不需要
			// onSMSSend() {
			// 	let smsParams = {};
			// 	smsParams.mobile = this.phoneNo;
			// 	smsParams.smsmode = "0";
			// 	let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
			// 	if (!smsParams.mobile || smsParams.mobile.length == 0) {
			// 		this.$tip.toast('请输入手机号');
			// 		return false
			// 	}
			// 	if (!checkPhone.test(smsParams.mobile)) {
			// 		this.$tip.toast('请输入正确的手机号');
			// 		return false
			// 	}
			// 	this.$http.post("/sys/sms", smsParams).then(res => {
			// 		if (res.data.success) {
			// 			this.smsCountDown = 60;
			// 			this.startSMSTimer();
			// 		} else {
			// 			this.smsCountDown = 0;
			// 			this.$tip.toast(res.data.message);
			// 		}
			// 	});
			// },
			// startSMSTimer() {
			// 	this.smsCountInterval = setInterval(() => {
			// 		this.smsCountDown--;
			// 		if (this.smsCountDown <= 0) {
			// 			clearInterval(this.smsCountInterval);
			// 		}
			// 	}, 1000);
			// },
			// onSMSLogin() {
			// 	let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);

			// 	if (!this.phoneNo || this.phoneNo.length == 0) {
			// 		this.$tip.toast('请填写手机号');
			// 		return;
			// 	}
			// 	if (!checkPhone.test(this.phoneNo)) {
			// 		this.$tip.toast('请输入正确的手机号');
			// 		return false
			// 	}
			// 	if (!this.smsCode || this.smsCode.length == 0) {
			// 		this.$tip.toast('请填短信验证码');
			// 		return;
			// 	}
			// 	let loginParams = {
			// 		mobile: this.phoneNo,
			// 		captcha: this.smsCode
			// 	};
			// 	this.PhoneLogin(loginParams).then((res) => {
			// 		console.log("res====》", res)
			// 		if (res.data.success) {
			// 			this.$tip.success('登录成功!')
			// 			this.$Router.replaceAll({
			// 				name: 'index'
			// 			})
			// 		} else {
			// 			this.$tip.error(res.data.message);
			// 		}
			// 	}).catch((err) => {
			// 		let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
			// 		this.$tip.error(msg);
			// 	});
			// },
		},
		beforeDestroy() {
			if (this.smsCountInterval) {
				clearInterval(this.smsCountInterval);
			}
		},
	}
</script>

<style lang='scss'>
	.login-paddingtop {
		padding-top: 50upx;
	}

	.zai-box {
		/* padding: 0 20upx;
        padding-top: 100upx; */
		position: relative;
	}

	.zai-bg {
		background-image: url(@/static/loginBg.png);
		background-size: 100% 100%;
		height: 350rpx;
	}
	.zai-logo {
		width: 200upx;
		height: 150px;
	}
	.login-capt {
		width: 200upx;
		height: 40px;
	}

	.zai-title {
		font-size: 58upx;
		color: #000000;
		text-align: center;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}
</style>
